<template>
  <Modal :mask-closable="false" v-model="opened" class="modal-content-layout" :title="title">
    <div class="t-r mb16">
      <Button @click="addScoreStandard" type="primary">{{ $t('ledger.NewScoringProject') }}</Button>
    </div>

    <div class="tableContent">
      <table class="scoreTable">
        <tr>
          <th class="head">{{ $t('ledger.ScoreN') }}</th> <!-- 分值 -->
          <th class="head">{{ $t('ledger.standard') }}</th> <!-- 标准 -->
          <th class="head">{{ $t('common.operation') }}</th> <!-- 操作 -->
        </tr>
        <tr v-for="(item, index) in dmsDeviceScoreStandardList" :key="index">
          <td class="cell">
            <Input style="border:#dcdee2 solid 1px;" v-model="item.grade" :placeholder="`${$t('common.inputInfo')}`" />
          </td>
          <td class="cell">
            <Input style="border:#dcdee2 solid 1px;" v-model="item.standardDesc"
              :placeholder="`${$t('common.inputInfo')}`" />
          </td>
          <td class="cell">
            <Button type="text" class="operationBtn" @click="deleted(index)">{{ $t('common.Delete') }}</Button> <!-- 删除 -->
          </td>
        </tr>
      </table>
    </div>

    <div slot="footer">
      <Button type="default" @click="close">{{ $t('common.Cancle') }}</Button>
      <Button type="primary" :loading="submitLoading" @click="submit">{{ $t('maintenance.Confirmed') }}</Button>
    </div>
  </Modal>
</template>

<script>
export default {
  name: 'scoreStandard',
  data() {
    return {
      dmsDeviceScoreStandardList: [{
        grade: '',
        standardDesc: ''
      }],
      submitLoading: false,
      opened: false,
      title: ''
    }
  },
  methods: {
    open(title, dmsDeviceScoreStandardList) {
      console.log(dmsDeviceScoreStandardList);
      this.dmsDeviceScoreStandardList = dmsDeviceScoreStandardList;
      this.title = title;
      this.opened = true;
    },
    close() {
      this.opened = false;
    },
    submit() {
      let empty = false;
      if (this.dmsDeviceScoreStandardList && this.dmsDeviceScoreStandardList.length > 0) {
        this.dmsDeviceScoreStandardList.forEach(item => {
          if (!item.grade || !item.standardDesc) {
            empty = true;
          }
        });
      }

      if (empty) {
        this.$Message.warning(({ content: '有未填项，无法保存', duration: 6, closable: true }));
        return false;
      }

      this.$emit('save', this.dmsDeviceScoreStandardList);
      this.opened = false;
      console.log(this.dmsDeviceScoreStandardList);
    },
    addScoreStandard() {
      this.dmsDeviceScoreStandardList.push({
        grade: '',
        standardDesc: ''
      });
    },
    deleted(index) {
      this.dmsDeviceScoreStandardList.splice(index, 1);
    }
  }
}
</script>

<style scoped>
.cell .suffix {
  display: block;
  line-height: 30px;
}



th {
  padding: 8px 0;
  text-align: center;
}

td {
  padding: 8px 18px;
  text-align: center;
}
</style>
